
<#import "common.ftl" as com>
<@com.page title="首页">
    <nav class="navbar navbar-default" style="display: flex;flex-direction: row;widows: 100%;min-width: 800px;align-items: center;">
        <div class="navbar-header" style="width: 10%;" >
            <a class="navbar-brand" href="#" style="color: rgb(255, 140, 60);">友评</a>
        </div>
        <div style="width: 25%;flex-direction: row;">
            <a href="#" class="navbar-text">
                <span class="glyphicon glyphicon-home" style="color: rgb(255, 140, 60);"> 首页</span>
            </a>
            <a class="navbar-text">
                <span class="glyphicon glyphicon-phone" style="color: black;"> 下载APP</span>
            </a>
        </div>
        <div  style="width: 20%;">
            <form >
                <div class="input-group">
                    <input type="text" class="form-control" autocomplete="off" placeholder="Search">
                    <span class="input-group-btn">
							<button type="submit" class="btn btn-default">
								<span class="glyphicon glyphicon-search" style="color: rgb(255, 140, 60);"></span>
							</button>
						</span>
                </div>
            </form>
        </div>
        <div class="navbar-right" style="width: 45%;flex-direction: row;display: flex;justify-content: flex-end;">

            <a href="./login" class="navbar-text ">
                <button id="login" class="btn btn-default" style="border-radius: 20px;border-color: transparent;background-color: transparent;">
                    <#if user?exists>
                        <span id="glyphicon"  style="color: rgb(255, 140, 60);">${user.accont}</span>
                    <#else>
                        <span id="glyphicon" class="glyphicon glyphicon-send" style="color: rgb(255, 140, 60);"> 登录</span>
                    </#if>
                </button>

            </a>
            <#if !user?exists>
                <a id="register" href="./register" class="navbar-text ">
                    <button class="btn btn-default" style="border-radius: 20px;border-color: rgb(255, 140, 60);color: rgb(255, 140, 60);">
                        <span>注册</span>
                    </button>

                </a>
            </#if>

            <a href="./editartical" class="navbar-text ">
                <button class="btn btn-default" style="border-radius: 20px;border-color: transparent;background-color:rgb(226,88,73);">
                    <span class="glyphicon glyphicon-pencil" style="color: white;"> 写文章</span>
                </button>
            </a>
        </div>
    </nav>
	<div class="container" style="flex-direction: row;justify-content: center;padding-top: 20px;display: flex;padding-left: 10%;padding-right: 10%">
            <div style="flex: 7;">
                <div id="myCarousel" class="carousel slide">
                    <!-- 轮播（Carousel）指标 -->
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                    </ol>
                    <!-- 轮播（Carousel）项目 -->
                    <div class="carousel-inner" style="border-radius: 20px">
                        <div class="item active">
                            <img src="../static/img/slider1.jpg" alt="First slide">
                            <div class="carousel-caption">标题 1</div>
                        </div>
                        <div class="item">
                            <img src="../static/img/slider2.jpg" alt="Second slide">
                            <div class="carousel-caption">标题 2</div>
                        </div>
                        <div class="item">
                            <img src="../static/img/slider3.jpg" alt="Third slide">
                            <div class="carousel-caption">标题 3</div>
                        </div>
                    </div>
                </div>
                <div style="display: flex">
                    <div style="width: 100%;height: auto;padding-top: 20px">
                    <#list ['人文社科','社会热点','@IT.互联网','手绘','摄影','旅行.在路上','历史'] as x>
                        <div class="titlelabel">
                            <img src="../static/img/titleimg.jpg" style="width: 30px;height: auto;border-top-left-radius:5px;border-bottom-left-radius: 5px ">
                            <label>${x}</label>
                        </div>
                    </#list>
                    </div>
                </div>
                <div >
                    <#list bloglist as item >
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    ${item.title}
                                </h4>
                            </div>
                            <div class="panel-body">
                                ${item.content}
                            </div>
                        </div>
                    </#list>
                </div>

            </div>
            <div style="flex: 3;">
                <div class="" style="width: 100%;display: block;height:auto">
                    <#list 1..5 as x>
                        <div class="right" style="width: 100%">
                            <div class="rightimg">
                                <img style="max-width: 100%;max-height: auto"  src="../static/img/newban.png">
                            </div>

                        </div>
                    </#list>
                </div>

            </div>
        </div>
</@com.page>
<style>
    .rightimg{
        padding-bottom: 21%;
        height: 0;
        width: 100%;
        padding-left: 10%;

        /*display: flex;*/
        /*justify-content: center;*/
    }
    .titlelabel
    {
        display: flex;
        flex-direction: row;
        border-radius: 5px;
        border-width: 1px;
        border-color: gray;
        background-color: #9acfea;
        float: left;

        align-items: center;
        margin-right: 20px;
        margin-bottom: 20px;


    }
    div.titlelabel label{
        white-space: nowrap;
        line-height: 30px;
        height: 30px;
        display: flex;
        margin-bottom: 0px;
        padding-right: 10px;
        padding-left: 10px;

    }
</style>
<script>
    $(document).ready(()=>{
        $("#myCarousel").carousel('cycle');
    })
</script>
